html,
body {
  padding: 0;
  margin: 0;
}

.card {
  background: #fff;
  box-shadow: 5px 5px 10px 0px #eeeeee;
  padding: 8px;
}
.card .title {
  border-left: #007aff 4px solid;
  padding-left: 4px;
}
.card .title .more {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card .title .more .point {
  display: inline-block;
  background: #000;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-right: 4px;
}
.card .content {
  border: #f0ad4e 2px solid;
  padding: 8px;
}
.card .content .three {
  padding: 8px;
}
.card .text-white {
  color: #fff;
}
.card .text-warning {
  color: #f0ad4e;
}
.card .text-primary {
  color: #007aff;
}
.card .bg-warning {
  background: #f0ad4e;
}
.card .bg-primary {
  background: #007aff;
}
.card .mt {
  margin-top: 10px;
}
.card .br {
  border-radius: 6px;
}
.card .text-center {
  text-align: center;
}
.card .f-w-600 {
  font-weight: 800;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.flex-worp {
  flex-wrap: wrap;
}
